<script type="text/javascript">
Ext.onReady(function() {
  var cm = new Ext.grid.ColumnModel([{header: '编号',dataIndex: 'id'},
                                     {header: '性别',dataIndex: 'sex'},
                                     {header: '名称',dataIndex: 'name'},
                                     {header: '描述',dataIndex: 'descn'}]);
  // 排序选项
  cm.defaultSortable = true;
  var data = [['9', 'male', 'name1', 'descn1'], ['2', 'male', 'name1', 'descn2'], ['3', 'male', 'name1', 'descn2']];
  var ds = new Ext.data.Store({
    proxy: new Ext.data.MemoryProxy(data),
    reader: new Ext.data.ArrayReader({}, [{name: 'id',mapping: 0},
                                          {name: 'sex',mapping: 1},
                                          {name: 'name',mapping: 2},
                                          {name: 'descn',mapping: 3}])
  });
  ds.load();
  
  var grid = new Ext.grid.GridPanel({
    ds: ds,
    cm: cm,
    anchor:'100% 60%'
  });  
  

   var p = new Ext.Panel({
       id: "detailPanel",
       title: '详细情况', // 标题
       collapsible: true, // 右上角上的那个收缩按钮，设为false则不显示
       anchor:'100% 40%',
       html: "请在上面网格中选择一行数据"// panel 主体中的内容，可以执行html代码
   });  
   
   // 定义详细信息的显示模板
   var bookTplMarkup = [
      '出版号: <a href="http://www.baidu.com/{ASIN}" target="_blank">{id}</a><br/>',
      '性别: {sex}<br/>',
      '名称: {name}<br/>',
      '描述: {descn}<br/>'
   ];
   var bookTpl = new Ext.Template(bookTplMarkup); // ExtJs 的模板组件
   
   grid.getSelectionModel().on('rowselect', function(sm, rowIdx, r) {
       var detailPanel = Ext.getCmp('detailPanel');
       bookTpl.overwrite(detailPanel.body, r.data);
       Ext.MessageBox.alert("提示","您选择的出版号是：" + r.data.ASIN);
   });
  
   var window = new Ext.Window({
       title: 'Resize Me',
       width: 500,
       height:300,
       minWidth: 300,
       minHeight: 200,
       layout: 'anchor',
       plain:true,// true则主体背景透明，false则主体有小差别的背景色，默认为false
       bodyStyle:'padding:5px;',
       buttonAlign:'center',
       modal:true,// 为模式窗口，后面的内容都不能操作，默认为false
       // closeAction:枚举值为：close(默认值)，当点击关闭后，关闭window窗口 hide,关闭后，只是hidden窗口
       // constrain：true则强制此window控制在viewport，默认为false
       items:[grid,p]
   });

   window.show();
});
</script> 